<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" :rules="rules" label-width="75px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="e学云号" prop="eID">
                                <el-input v-model="query.eID" placeholder="请输入e学账号" style="width:100%" :maxlength="9"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="姓名" prop="teacherName">
                                <el-input v-model="query.teacherName" placeholder="请输入" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="登录次数" prop="minDay">
                                <el-input v-model="query.minDay" placeholder="请输入最小登录次数" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="报表日期" prop="reportDate">
                                <el-row>
                                    <el-col :span="11">
                                        <el-date-picker v-model="query.startDate" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="startDateChange" style="width:100%"></el-date-picker>
                                    </el-col>
                                    <el-col :span="2" align="center">-</el-col>
                                    <el-col :span="11">
                                        <el-date-picker v-model="query.endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2" @change="endDateChange" style="width:100%"></el-date-picker>
                                    </el-col>
                                </el-row>  
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="14">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit('query')">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="table" >
                <div class="table-title">
                    <exportExcel :jsonStr='jsonStr'></exportExcel>
                </div> 
                <el-table :empty-text="emptyText" :data="tableData" border v-loading="loading" style="width: 100%" :default-sort = "{prop: 'login', order: 'descending'}" @sort-change='sortChange'>
                    <el-table-column label="e学账号" align="center">
                        <template scope="scope">
                            <span>{{scope.row.s_exue_code | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="家长名称" align="center">
                        <template scope="scope">
                            <span>{{scope.row.s_name | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="登录次数" align="center" sortable='custom' prop="login">
                        <template scope="scope">
                            <span>{{scope.row.login | isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="发布动态数" align="center" sortable='custom' prop="newsRelease">
                        <template scope="scope">
                            <span>{{scope.row.newsRelease | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="作业提交次数" align="center" sortable='custom' prop="submitWork">
                        <template scope="scope">
                            <span>{{scope.row.submitWork | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="提分次数" align="center" sortable='custom' prop="improveFinish">
                        <template scope="scope">
                            <span>{{scope.row.improveFinish | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="孩子个数" align="center" sortable='custom' prop="student_count">
                        <template scope="scope">
                            <span>{{scope.row.student_count | isNull}}</span>
                        </template>
                    </el-table-column>
                 
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import exportExcel from 'components/ExportExcel';  
    import { queryTable } from 'api/common';
    import { mapState, mapActions } from 'vuex';
    export default{
        name: 'parentsActive',
        components: {echartsLayout, exportExcel},
        data() {
            return {
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: true,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    eID: '',
                    teacherName: '',
                    minDay: '',
                    startDate: '',
                    endDate: '',
                    sortBy: 'login',
                    flag: true
                },
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                pickerOptions1: null,
                pickerOptions2: null,
                jsonStr: null,
                rules: {
                    eID: [
                        { pattern: /^[0-9]{9}$/, trigger: 'blur', message: '请输入完整的e学云ID'}
                    ],
                    minDay: [
                        { pattern: /^\d+$/, trigger: 'blur', message: '请输入数字'}
                    ]
                }
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            }),
            emptyText() {
                return this.pageQuery.currentpage == 1 ? '暂无数据' : '为保障流畅性，暂展示一万条数据，您可查询所需信息';
            }
        },
        created() {
            this.queryData();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            queryData() {
                let startDate = this.query.startDate==''?'':moment(this.query.startDate).format('YYYY-MM-DD'); 
                let endDate = this.query.endDate==''?'':moment(this.query.endDate).format('YYYY-MM-DD'); 

                let exueCode = this.query.eID;
                let parentName = this.query.teacherName;
                let parentLoginDays = this.query.minDay;
                let from_date = startDate;
                let to_date = endDate;
                let sortBy = this.query.sortBy; 
                let flag = this.query.flag;

                let query_id = 18;
                let show_list = false;
                let real_time = false;
                let type = 'event';
              
                let query = {
                    'order_field': sortBy,  // 排序属性名 
                    'order_desc': flag,     // 反序，如果不纯在或不为true，则表示正序 
                    exueCode,
                    parentName,
                    parentLoginDays,
                    from_date,
                    to_date
                };

                this.jsonStr = {
                    'query_id': 18, 
                    'show_list': false, 
                    'real_time': false,
                    'type': 'event',
                    'file_name': '家长活跃度', 
                    'field_names': [['e学账号', 's_exue_code'], ['家长名称', 's_name'], ['登录次数', 'login'], ['发布动态数', 'newsRelease'], ['作业提交次数', 'submitWork'], ['提分次数', 'improveFinish'], ['孩子个数', 'student_count']],
                    query
                };

                this.loading = true;
                queryTable(query, query_id, this.pageQuery.currentpage, this.config.pageSize, show_list, type, real_time).then(response => {
                    this.loading = false;
                    this.tableData = [];
                    if (response.data.content) {
                        this.tableData = response.data.content.rows;
                        this.pageQuery.total = response.data.content.total || response.data.content.total_rows;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.tableData = [];
                });
            },
            onSubmit(query) {
                this.$refs[query].validate((valid) => {
                    if (valid) {
                        this.pageQuery.currentpage = 1;
                        this.queryData();
                    }
                })
            },
            sortChange({ column, prop, order }) {
                this.query.sortBy = prop?prop:'login';
                this.query.flag = order=='ascending'?false:true;
                this.queryData();
            },
            startDateChange(date) {
                this.pickerOptions2 = {
                    disabledDate(time) {
                        return (time.getTime() < new Date(date).getTime() - 864e5);
                    }
                }
            },
            endDateChange(date) {
                this.pickerOptions1 = {
                    disabledDate(time) {
                        return (time.getTime() > new Date(date).getTime());
                    }
                } 
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     